<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 表格 -->
      <el-card>
        <div style="text-align: right; margin-bottom: 20px">
          <el-button type="primary" size="small" @click="handleAdd(1, '0')">添加权限</el-button>
        </div>
        <el-table :data="list" border row-key="id">
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <!-- 需要注意的是，当 type为1 时为一级权限， type为2 时为二级权限, 没有三级权限 -->
              <el-button v-if="row.type === 1" size="small" type="text" @click="handleAdd(2, row.id)"
                >添加权限点</el-button
              >
              <el-button size="small" type="text" @click="toEdit(row.id)">查看</el-button>
              <el-button size="small" type="text" @click="handleDelete(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 弹框层 -->
      <!-- 新增编辑的弹层 -->
      <el-dialog :visible="showDialog" :title="formData.id ? '编辑权限' : '添加权限'" @close="handleClose">
        <!-- 表单内容 -->
        <el-form ref="addRef" label-width="100px" :model="formData" :rules="rules">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="formData.name" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="formData.code" />
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model="formData.description" />
          </el-form-item>
          <el-form-item label="是否展示" prop="enVisible">
            <el-switch
              v-model="formData.enVisible"
              active-value="0"
              inactive-value="1"
              active-text="启用"
              inactive-text="禁用"
              active-color="#13ce66"
              inactive-color="#eee"
            />
          </el-form-item>
        </el-form>

        <template #footer>
          <div style="text-align: right">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  reqGetPermissionList,
  reqAddPermission,
  reqDelPermission,
  reqGetPermissionDetail,
  reqUpdatePermission
} from '@/api/permisson'
import { translateListToTree } from '@/utils'

export default {
  name: 'Permission',
  data() {
    return {
      // 普通的弹框的标志位
      showDialog: false,
      // 用来存储一进页面就调用的权限的接口得数据
      list: [],
      // 弹框中的表单
      formData: {
        enVisible: '0', // 开启
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        type: '', // 类型
        pid: '', // 添加到哪个节点下
        id: ''
      },
      // 表单的验证规则
      rules: {
        name: [{ required: true, message: '权限点名称不能为空', trigger: ['blur', 'change'] }],
        code: [{ required: true, message: '权限点编码不能为空', trigger: ['blur', 'change'] }]
      }
    }
  },
  created() {
    this.loadPermissionList()
  },
  methods: {
    // 关闭弹窗的时候需要做的事情
    handleClose() {
      // 1.关闭弹框
      this.showDialog = false
      // 2.清空表单
      this.$refs.addRef.resetFields()
      this.formData = this.$options.data().formData
    },
    // 获取加载权限的列表
    async loadPermissionList() {
      try {
        const ret = await reqGetPermissionList()
        if (ret.code === 10000) {
          // 调用接口成功，将数据存储到data中的list中
          // 将请求回来的数据转换为树形数据
          this.list = translateListToTree(ret.data, '0')
        } else {
          this.$message.error('获取用户权限信息失败')
        }
      } catch {
        this.$message.error('获取用户权限信息失败')
      }
      // 判断调用接口是否成功
      // console.log(ret)
    },
    // 点击添加要做的事
    // 添加弹窗，添加权限
    handleAdd(type, pid) {
      // 设置权限级别
      // 将调用这个方法的组件的实参赋值给data中的formData
      // 设置权限的级别
      this.formData.type = type
      // 设置权限的父节点
      this.formData.pid = pid
      // 显示弹窗
      this.showDialog = true
    },
    // 添加后点击确定要做的事
    handleSubmit() {
      // 这里需要判断是要添加还是要编辑，添加的formData中没有id
      // 进行兜底验证
      this.$refs.addRef.validate(async valid => {
        if (!valid) return
        if (this.formData.id) {
          // 编辑
          try {
            const retUpdate = await reqUpdatePermission(this.formData)
            if (retUpdate.code === 10000) {
              // 获取接口成功
              // 数据回填
              this.formData = retUpdate.data
              // 重新渲染数据
              this.loadPermissionList()
              // 关闭弹窗
              this.handleClose()
              this.$message.success('修改信息成功')
            } else {
              this.$message.error('编辑信息失败')
            }
          } catch {
            this.$message.error('编辑信息失败')
          }
        } else {
          // 添加
          try {
            // 调用新增权限的接口
            const ret = await reqAddPermission(this.formData)
            if (ret.code === 10000) {
              // 1.将数据重新渲染
              this.loadPermissionList()
              // 2.关闭弹框
              this.showDialog = false
              // 3.重置表单
              this.$refs.addRef.resetFields()
              this.formData = this.$options.data().formData
              // 4.提示添加成功
              this.$message.success('添加权限成功')
            } else {
              this.$message.error('添加权限失败')
            }

            // console.log(ret)
          } catch {
            this.$message.error('添加权限失败')
          }
        }
      })
    },
    // 删除功能
    async handleDelete(id) {
      // 询问是否要删除
      const res = await this.$confirm('确认要删除角色吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (res === 'cancel') return
      try {
        const ret = await reqDelPermission(id)
        if (ret.code === 10000) {
          // 刷新数据
          this.loadPermissionList()
          this.$message.success('删除权限成功')
        }
      } catch {
        this.$message.error('删除权限失败')
      }
    },
    // 查看时回填数据
    async toEdit(id) {
      try {
        const ret = await reqGetPermissionDetail(id)
        // console.log(ret)
        if (ret.code === 10000) {
          // 1.将数据回填
          this.formData = ret.data
          // 2.显示弹框
          this.showDialog = true
        }
      } catch {
        this.$message.error('查看数据失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
